import React, {useEffect, useRef} from "react";
import {gsap} from "gsap";
import {ScrollTrigger} from "gsap/ScrollTrigger";
import "./NavigationBar.scss";

gsap.registerPlugin(ScrollTrigger);

const NavigationBar: React.FC = () => {
  const navRef = useRef<any>(null);

  useEffect(() => {
    const nav = navRef.current;
    if (!nav) return;

    // 初始化导航栏动画
    gsap.fromTo(
      nav,
      {
        y: -100,
        opacity: 0
      },
      {
        y: 0,
        opacity: 1,
        duration: 1,
        delay: 0.5,
        ease: "power2.out"
      }
    );

    // 滚动时改变导航栏背景透明度
    ScrollTrigger.create({
      trigger: document.body,
      start: "top top",
      end: "bottom bottom",
      onUpdate: self => {
        const progress = self.progress;
        gsap.to(nav, {
          backgroundColor: progress > 0.1 ? "rgba(255, 255, 255, 0.95)" : "rgba(255, 255, 255, 0.8)",
          duration: 0.3,
          ease: "power1.out"
        });
      }
    });

    return () => {
      ScrollTrigger.getAll().forEach(trigger => trigger.kill());
    };
  }, []);

  return (
    <nav ref={navRef} className="navigation-bar">
      <div className="nav-container">
        <div className="nav-logo">
          <span className="logo-text">光影记录</span>
        </div>
        <div className="nav-menu">
          <a href="#home" className="nav-link">
            首页
          </a>
          <a href="#gallery" className="nav-link">
            作品集
          </a>
          <a href="#about" className="nav-link">
            关于我
          </a>
          <a href="#contact" className="nav-link">
            联系
          </a>
        </div>
        <div className="nav-actions">
          <button className="subscribe-btn">订阅更新</button>
        </div>
      </div>
    </nav>
  );
};

export default NavigationBar;
